﻿



        <!DOCTYPE HTML>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script>
        <script src="../../Scripts/highcharts.js"></script>  
        <script src="../../Scripts/modules/exporting.js"></script>
        <script type="text/javascript">
        $(function () {
        // ten san pham
        var sam= new Array();
        var array = @Html.Raw(Json.Encode(@ViewBag.listKetQua));
        for(var i =0; i<array.length;i++){
           sam[i] = array[i];
        }  
       
        $('#statistics').highcharts({
            chart: {
                type: 'column',
                margin: [ 150, 50, 100, 80]
            },
            title: {
                text: 'Doanh số năm @ViewBag.Year ' 
            },
            xAxis: {
                categories: [
                    'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6',
                    'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'
                ],
                labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'VND'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
               formatter: function() {
					return 'Doanh thu: <b>' + Highcharts.numberFormat(this.point.y, 0) + '</b> VND ';
				}
               // pointFormat: 'Doanh số bán ra trong năm: <b>{point.y:.0f} VND</b>',
	           //   pointFormat: 'Doanh số bán ra trong năm: <b>{' + Highcharts.numberFormat(this.point.y, 0) + ':.0f} VND</b>',
            },
            series: [{
                name: 'soluong',
                data: [ sam[0],
                        sam[1],
                        sam[2], 
                        sam[3], 
                        sam[4], 
                        sam[5], 
                        sam[6], 
                        sam[7], 
                        sam[8],
                        sam[9],
                        sam[10],
                        sam[11],
                        sam[12] ],
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    x: 4,
                    y: 10,
                    style: {  fontSize: '13px', fontFamily: 'Verdana, sans-serif', textShadow: '0 0 3px black'  }
                }
            }]
        });

        
    });


        function yearOptionOnChangeValue() {
            var dropdown = document.getElementById('yearOptions');
            var selectedIndex = dropdown.selectedIndex;
            switch (selectedIndex) {
            case 1:
                    location.href = "/admin/StatisticsDoanhSo/2012";
                break;
            case 2:
                location.href = "/admin/StatisticsDoanhSo/2013";
                break;
            case 3:
                location.href = "/admin/StatisticsDoanhSo/2014";
                break;
            }
            
        }
      
		</script>

        
	</head>
    <body>
        <p>Chọn năm: <select onchange="yearOptionOnChangeValue()"  id="yearOptions">
                          <option></option>
                          <option>2012</option>
                          <option>2013</option>
                          <option>2014</option>
                      </select></p>
        
        <div id="statistics" style="width: 1000px; height: 400px; margin: 0 auto; float:right"></div>
 
    </body>
</html>